@mixin category-menu-css-transition {
	&-appear {
		opacity: 0;

		&-active {
			opacity: 1;
			transition: opacity .15s ease-out;
		}
	}

	&-exit {
		opacity: 1;

		&-active {
			opacity: 0;
			transition: opacity .15s ease-out;
		}
	}
}

.category-menu {
	position: absolute;
	width: 100%;
	// padding-left: -2rem;

	&__container {
		position: relative;
		max-width: $container-max-width;
		padding: 0 $container-spacing-x;
		margin: 0 auto;
		width: 100%;
		height: 100%;
	}

	&__body {
		display: inline-block;
		border-radius: 0 0 $border-radius-lg $border-radius-lg;
		box-shadow: $box-shadow-lg;
		overflow: hidden;

		&--show-hidden-groups {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: stretch;
		}
	}

	&__list {
		width: $category-menu-btn-width;
		padding: $spacing-scale-5 0;
		background-color: #fff;
	}

	&__item {
		$item: &;

		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: $spacing-scale-5 $spacing-scale-8;
		width: 100%;

		&--active {
			background-color: $body-bg-color;

			& #{$item}-icon,
			& #{$item}-text {
				color: $color-primary;
			}
		}

		&-text {
			flex: 1;
			font-family: $font-family;
			font-size: $font-size;
			font-weight: 500;
			letter-spacing: .4px;
			text-align: left;
			color: $body-color;
		}

		&-icon {
			color: $icon-color;
			margin-right: $spacing-scale-7;

			&--right {
				margin: 0;
			}
		}
	}

	&__hidden-groups {
		flex: 1;
		background-color: $body-bg-color;
	}

	&__hidden-groups-body {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		padding: $spacing-scale-5;
		overflow: auto;
	}

	&__group {
		$group: &;

		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding: $spacing-scale-5 $spacing-scale-7;
		width: 20rem;

		&:hover {
			& #{$group}-img-box {
				box-shadow: 0 0 0 2.5px $color-primary;
			}
		}

		&-img-box {
			background-color: #fff;
			height: 8rem;
			width: 8rem;
			padding: $spacing-scale-2;
			border-radius: 50%;
			margin-bottom: $spacing-scale-5;
			overflow: hidden;
			transition: all .3s ease-out;
		}

		&-img {
			display: block;
			width: auto;
			height: 100%;
			margin: 0 auto;
		}

		&-link {
			&,
			&:link,
			&:visited {
				color: $link-color;
				text-decoration: none;
			}

			&:hover {
				color: $color-primary;
				text-decoration: underline;
			}

			&:focus {
				outline: none;
				border-radius: $btn-border-radius;
				box-shadow: $btn-focus-box-shadow;
			}
		}

		&-title {
			font-weight: 500;
			margin-bottom: $spacing-scale-6;
		}

		&-item {
			text-align: left;
			line-height: 1;
			margin-bottom: $spacing-scale-4;
		}

		&-all-link {
			display: flex;
			flex-flow: row nowrap;
			font-size: $font-size-small;
			font-weight: bold;
			margin-left: -$spacing-scale-2;
		}
	}

	@include category-menu-css-transition;
}

.category-menu-backdrop {
	@include category-menu-css-transition;
}
